import React from 'react'
import axios from 'axios'
import { Provider, connect } from 'react-redux';
import store from '@/redux/reducer.jsx'
import {mapStateToProps,mapDispatchToProps} from '@/redux/action.js'
// import cartscss from '@/css/cart.scss'
import 'bootstrap/dist/css/bootstrap.min.css'

class Cart extends React.Component{
	constructor(){
		super()
		this.state={
			number:'清空购物车'
		}
	}
	componentWillMount() {
	  store.subscribe(() => {
	    this.setState({
			list: this.props.cart
	    })
	  })
	  // console.log(this.props.cart)
	}
	// 增加数量
// 	addNum(index){
// 		var number = 0;
// 		for(var i in this.props.cart){
// 			number += this.props.cart[i].num++;
// 		}
// 		return number;
// 	}
	// 减少数量
	cutNum(index){
	
	}
	render(){
		return(
			<div>
				<table className="table table-border">
					<thead>
						<tr>
							<th>ID</th>
							<th>名称</th>
							<th>价格</th>
							<th>数量</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{this.props.cart.map((item,index)=>
							{return(
									<tr key={index}>
										<td>{item.id}</td>
										<td>{item.name}</td>
										<td>{item.price}</td>
										<td>{item.num}</td>
										<td>{item.price*item.num}</td>
										<td>
											<button onClick={()=>{this.props.cutNum(index)}}>-</button>
											<button onClick={()=>{this.props.addNum(index)}}>+</button>
											<button>删除</button>
										</td>
									</tr>
							)
						})}
					</tbody>
				</table>
				 <footer>
						 <div>
								<div>总数：0</div>
								<div>总价为：0</div>
								<input type='button' value={this.state.number}/>
						 </div>
				</footer>
			</div>
		)
	}
}
Cart = connect(mapStateToProps,mapDispatchToProps)(Cart)

export default Cart;